<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>网站信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 网站信息表格区域 -->
      <el-table :data="webInfo" border width="100%">
        <el-table-column label="网站logo" prop="websiteLogoId">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="imgStr(scope.row.websiteLogoId)"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="网站名称" prop="websiteName"></el-table-column>
        <el-table-column label="网站域名" prop="domainName"></el-table-column>
        <el-table-column label="ICP备案" prop="icpNumber"></el-table-column>
        <el-table-column
          label="公安备案备案"
          prop="policeNumber"
        ></el-table-column>
        <el-table-column label="操作" width="100px">
          <!-- 修改网站信息按钮区域 -->
          <template slot-scope="scope">
            <el-button type="primary" plain @click="updateWebInfo(scope.row.id)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改网站信息的对话框 -->
      <el-dialog
        title="网站信息"
        :visible.sync="updateWebInfoDialogVisible"
        width="50%"
        @close="editWebInfoDialogClosed"
      >
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef">
          <el-form-item label="网站名称" prop="websiteName">
            <el-input v-model.trim="editForm.websiteName"></el-input>
          </el-form-item>
          <el-form-item label="网站域名" prop="domainName">
            <el-input v-model.trim="editForm.domainName"></el-input>
          </el-form-item>
          <el-form-item label="ICP备案" prop="icpNumber">
            <el-input v-model.trim="editForm.icpNumber"></el-input>
          </el-form-item>
          <el-form-item label="公安备案" prop="policeNumber">
            <el-input v-model.trim="editForm.policeNumber"></el-input>
          </el-form-item>
          <el-form-item label="缩略图">
            <el-upload
              list-type="picture-card"
              :action="uploadActionUrl"
              :headers="uploadActionHeader"
              :on-success="handleAvatarSuccessEdit"
              :before-upload="beforeAvatarUpload"
              :limit="1"
            >
              <el-image :src="imgString"> </el-image>
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- 底部按钮区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateWebInfoDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="sumbitWebInfo()">提交</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 网站信息
      webInfo: [],
      // 网站logo的缩略图
      imgString: '',
      // 修改网站信息对话框的显示与隐藏
      updateWebInfoDialogVisible: false,
      // 修改网站信息对话框的数据绑定对象
      editForm: {},
      // 网站信息的表单验证规则
      editFormRules: {
        // 网站名称
        websiteName: [
          { required: true, message: '请输入网站名称', trigger: 'blur' }
        ],
        // 网站域名
        domainName: [
          { required: true, message: '请输入网站域名', trigger: 'blur' }
        ],
        // ICP备案
        icpNumber: [
          { required: true, message: '请输入网站ICP备案号', trigger: 'blur' }
        ],
        // 公安备案
        policeNumber: [
          { required: true, message: '请输入网站公安备案号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 头像上传api接口需要token验证
    uploadActionHeader () {
      return {
        Authorization: 'Bearer ' + window.sessionStorage.getItem('token')
      }
    },
    // 头像上传的api地址
    uploadActionUrl () {
      const baseUrl = 'https://api.h1234.top/'
      const uploadUrl = 'files/uploadfiles'
      return baseUrl + uploadUrl
    }
  },
  created () {
    // 获取网站信息
    this.getWebInfo()
  },
  methods: {
    // 获取网站信息
    async getWebInfo () {
      const { data: res } = await this.$http.get('WebsiteInfo')
      if (res.meta.status !== 200) {
        // 网站信息获取失败
        this.$message.error('网站信息获取失败！')
      } else {
        console.log(res.data.websiteInfo);
        // 网站信息获取成功
        // 将获取到的数据赋值给webInfo数组
        this.webInfo = res.data.websiteInfo
      }
    },
    // 修改网站信息
    async updateWebInfo (id) {
      // 显示修改网站信息的对话框
      this.updateWebInfoDialogVisible = true
      // 往数据库中发送请求
      const { data: res } = await this.$http.get('WebsiteInfo/id/' + id)
      if (res.meta.status !== 200) {
        // 网站信息获取失败
        this.$message.error('网站信息获取失败！')
      } else {
        // 网站信息获取成功
        this.editForm = res.data
        // 缩略图
        this.imgString = 'https://api.h1234.top/files/' + this.editForm.websiteLogoId
      }
    },
    // 点击按钮，确认修改网站信息
    sumbitWebInfo () {
      // 对表单进行预验证
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          // 预验证不通过
          this.$message.error('请按照提示填写相应的内容！')
        } else {
          // 预验证通过
          // 往数据库中发送请求
          const { data: res } = await this.$http.put('WebsiteInfo/' + this.editForm.id, this.editForm)
          if (res.meta.status !== 200) {
            // 网站信息更新失败
            this.$message.error('网站信息更新失败！')
          } else {
            // 网站信息更新成功
            // 隐藏对话框
            this.updateWebInfoDialogVisible = false
            // 刷新网站信息列表
            this.getWebInfo()
            this.$message.success('网站信息更新成功！')
          }
        }
      })
    },
    // 监听修改网站信息对话框的关闭事件
    editWebInfoDialogClosed () {
      // 重置表单数据
      this.$refs.editFormRef.resetFields()
    },
    // logo地址
    imgStr (id) {
      return `https://api.h1234.top/files/${id}`
    },
    // 头像上传前的钩子函数，用于检测上传文件的大小、类型等
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式！')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB！')
      }
      return isJPG && isLt2M
    },
    // 头像上传成功后调用的方法
    handleAvatarSuccessEdit (res, file) {
      const fullPath = URL.createObjectURL(file.raw)
      this.editForm.websiteLogoId = res.data[0].id
      this.dialogFormFullUrl = fullPath
    }
  }
}
</script>

<style lang="css" scoped>
</style>
